@keyframes ride-line {
  0% {
    top: 0;
  }
  50% {
    top: 100%;
    margin-top: -20px;
  }
  100% {
    top: 0;
  }
}
.wrapper {
  position: relative;
  margin: 0 auto;
  width: 400px;
  height: 400px;
  background: red;
  border-radius: 50%;
}
.wrapper .line {
  position: absolute;
  width: 2px;
  height: 100%;
  background: white;
  left: calc(50% - 1px);
}
.wrapper .line .circle {
  position: absolute;
  width: 20px;
  height: 20px;
  background: blue;
  border-radius: 50%;
  left: 50%;
  margin-left: -10px;
  animation: ride-line 4000ms ease-in-out infinite;
}
.wrapper .line-1 {
  transform: rotate(0deg);
}
.wrapper .line-1 .circle-1 {
  animation-delay: 166.6666666667ms;
}
.wrapper .line-2 {
  transform: rotate(15deg);
}
.wrapper .line-2 .circle-2 {
  animation-delay: 333.3333333333ms;
}
.wrapper .line-3 {
  transform: rotate(30deg);
}
.wrapper .line-3 .circle-3 {
  animation-delay: 500ms;
}
.wrapper .line-4 {
  transform: rotate(45deg);
}
.wrapper .line-4 .circle-4 {
  animation-delay: 666.6666666667ms;
}
.wrapper .line-5 {
  transform: rotate(60deg);
}
.wrapper .line-5 .circle-5 {
  animation-delay: 833.3333333333ms;
}
.wrapper .line-6 {
  transform: rotate(75deg);
}
.wrapper .line-6 .circle-6 {
  animation-delay: 1000ms;
}
.wrapper .line-7 {
  transform: rotate(90deg);
}
.wrapper .line-7 .circle-7 {
  animation-delay: 1166.6666666667ms;
}
.wrapper .line-8 {
  transform: rotate(105deg);
}
.wrapper .line-8 .circle-8 {
  animation-delay: 1333.3333333333ms;
}
.wrapper .line-9 {
  transform: rotate(120deg);
}
.wrapper .line-9 .circle-9 {
  animation-delay: 1500ms;
}
.wrapper .line-10 {
  transform: rotate(135deg);
}
.wrapper .line-10 .circle-10 {
  animation-delay: 1666.6666666667ms;
}
.wrapper .line-11 {
  transform: rotate(150deg);
}
.wrapper .line-11 .circle-11 {
  animation-delay: 1833.3333333333ms;
}
.wrapper .line-12 {
  transform: rotate(165deg);
}
.wrapper .line-12 .circle-12 {
  animation-delay: 2000ms;
}